<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="css/mui.min.css">
		<link rel="stylesheet" href="style/fjol_style.css" />
		<link rel="stylesheet" type="text/css" href="style/xol_style.css"/>
	</head>

	<body>
		<!--下拉刷新容器-->
		
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<!--数据列表-->
				<ul class="mui-table-view" id="recommendList">
					
				</ul>
			</div>
		</div> 
		<script src="js/mui.min.js"></script>
		<script src="js/jquery-2.1.0.js"></script>
		<script src="js/md5.js"></script>
		<script src="js/generalUtil.js"></script>
		<script src="js/network.js"></script>
		<script src="js/mui.pullToRefresh.js"></script>
		<script src="js/mui.pullToRefresh.material.js"></script>
		<script>
			mui.init({
				pullRefresh: {
					container: '#pullrefresh',
					down: {
						callback: pulldownRefresh
					},
					up: {
						contentrefresh: '正在加载...',
						callback: pullupRefresh
					}
				}
			});
			
				var pageValue =1;
		/**
			 * 下拉刷新具体业务实现
			 */
			function pulldownRefresh() {
				setTimeout(function(){
					dataLoad(1,10);
					mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
					mui('#pullrefresh').pullRefresh().enablePullupToRefresh();
					return pageValue = 1;
				},1000);
				
			}	
			/**
			 * 上拉加载具体业务实现
			 */
			
			function pullupRefresh() {
				setTimeout(function() {

				pageValue++;
				var count;
//				console.log(pageValue);
					mui('#pullrefresh').pullRefresh().endPullupToRefresh((count==0));
				
					var recommendParam = [{
						key:'page',
						value:pageValue
					},{
						key:'rows',
						value:10
					}];
					fjNetwork.get('fjzx/client/house-recommend-list.json',recommendParam,function(data){
//					console.log(JSON.stringify(data));
					var rows = data.rows;
					
					count = rows.length;
					mui('#pullrefresh').pullRefresh().endPullupToRefresh((rows.length==0)); //参数为true代表没有更多数据了。
					
					var recommendList = document.querySelector('#recommendList');
					
					for (var i=0; i<count; i++) {
						var li = document.createElement('li');	//创建一个li标签
						li.className = 'mui-table-view-cell';	//设置class
						li.setAttribute('id',rows[i].id);
						var recommendArr = new Array();
						
						var totalPrice = Math.round(rows[i].totalPrice/10000);
						var squarePrice = rows[i].squarePrice;	//
						var bedRoomNumber = rows[i].bedRoomNumber;
						var livingRoomNumber = rows[i].livingRoomNumber;
						var keywords = rows[i].keyword?rows[i].keyword.split(','):'';
						var keywordCls = [		//关键字颜色类cls
									'keyword-color1 ',
									'keyword-color2 ',
									'keyword-color3 ',
									'keyword-color4 '
								];
				        
				        recommendArr.push('<a href="javascript:;" class="" style="padding-right:20px;">');
							recommendArr.push('<div class="mui-pull-left mr5" style="width: 90px; height: 65px; overflow: hidden;">');
				        		if(rows[i].coverImage){
				        			recommendArr.push('<img src="'+rows[i].coverImage+'">');
				        		}else{
				        			recommendArr.push('<img src="images/icon_blank.png" style="max-width: 100%; max-height: 75px;">');
				        		}
				        	recommendArr.push('</div>');
							recommendArr.push('<div class="mui-media-body" style="white-space: normal;">');
								recommendArr.push('<span style="font-weight: bold;">'+rows[i].title+'</span>');
								
									recommendArr.push('<div class="flex" style="color:#ef263a;">');
										recommendArr.push('<p class="flexCell f08 m0">'+bedRoomNumber+'室 '+livingRoomNumber+'厅 '+rows[i].square+'平</p>');
										recommendArr.push('<div class="">');
											recommendArr.push('<span style="font-weight: bold;font-size: 13px;">'+squarePrice+'</span>');
											recommendArr.push('<span class="f08">元/平</span> ');
										recommendArr.push('</div>');
									recommendArr.push('</div>');
									recommendArr.push('<p class="mui-ellipsis f08 m0">'+rows[i].area+' '+rows[i].buildingName+'</p>');
									recommendArr.push('<div class="f08">');
										for (var j in keywords) {
				                			var keyidx = j%keywordCls.length;
				                			recommendArr.push('<button type="button" class="mui-btn '+keywordCls[keyidx]+' keyword-btn f08">'+keywords[j]+'</button>');
				                	}
									recommendArr.push('</div>');
									
							recommendArr.push('</div>');
						recommendArr.push('</a>');
					li.innerHTML = recommendArr.join('');
					recommendList.appendChild(li);
					}
					
					
					mui('#recommendList li').each(function(){
						this.addEventListener('tap',function(){
							mui.openWindow({
								url:'house_detail.html',
								id:'house_detail',
								extras:{
									houseId:this.getAttribute('id')
								}
							})
						});
					
				});
				
				
					var imgObj = $('#recommendList img');
//					console.log(imgObj.length);
					var RATE = 0.75;	//常量，图片框比例
					imgObj.each(function(){
						$(this).load(function(){
							var rate = parseFloat($(this).height()/$(this).width());
							if(rate<RATE){		//高度不够
								$(this).css('height','75px');
								$(this).css('width',$(this).height()/rate);
							}else{				//宽度不够
								$(this).css('width','100px');
								$(this).css('height',$(this).width()*rate);
							}
							if($(this).width()>100){
								var marginLeft = parseInt(-($(this).width()-100)*0.5);
								$(this).css('margin-left',marginLeft);
							}
							if($(this).height()>75){
								var marginTop = parseInt(-($(this).height()-75)*0.5);
								$(this).css('margin-top',marginTop);
							}
						});
					});
				
				},function(msg){
					mui.toast(msg);
				});
				
				},1000);
			}
			mui.plusReady(function(){
				
			dataLoad(1,10);
				
				
			});
				function dataLoad(pageValue,rowsNumber){
//					console.log(pageValue);
					var recommendParam = [{
						key:'page',
						value:pageValue
					},{
						key:'rows',
						value:rowsNumber
					}];
					fjNetwork.get('fjzx/client/house-recommend-list.json',recommendParam,function(data){
//					console.log(JSON.stringify(data));
					var rows = data.rows;
					var recommendList = document.querySelector('#recommendList');
					var recommendArr = new Array();
					if(rows.length==0){
						if(pageValue == 1){
							recommendList.innerHTML = '<div class="mui-text-center"><img src="images/icon_blank.png"/></div>'
						}
					}else{
						
					
					for (i in rows) {
						var totalPrice = Math.round(rows[i].totalPrice/10000);
						var squarePrice = rows[i].squarePrice;	//
						var bedRoomNumber = rows[i].bedRoomNumber;
						var livingRoomNumber = rows[i].livingRoomNumber;
						var keywords = rows[i].keyword?rows[i].keyword.split(','):'';
						var keywordCls = [
									'keyword-color1 ',
									'keyword-color2 ',
									'keyword-color3 ',
									'keyword-color4 '
								];
						recommendArr.push('<li class="mui-table-view-cell" id="'+rows[i].id+'">');
//				        recommendArr.push('<a href="javascript:;" style="padding-right:20px;">');
////				            recommendArr.push('<img class="mui-pull-left mr5" width="100" height="80" src="'+rows[i].coverImage+'">');
//				            recommendArr.push('<div class="mui-pull-left mr5" style="border-radius: 4px;width: 100px; height: 75px; overflow: hidden;">');
//				            recommendArr.push('<img src="'+rows[i].coverImage+'">');
//				            recommendArr.push('</div>');
//				            recommendArr.push('<div class="mui-media-body" style="white-space: normal;">');
//				               recommendArr.push(' <span style="font-weight: bold;">'+rows[i].title+'</span>');
//				                recommendArr.push('<div class="mui-clearfix">');
//				                	recommendArr.push('<div>');
//				                		recommendArr.push('<p class="mui-ellipsis">'+bedRoomNumber+'室'+livingRoomNumber+'厅'+rows[i].square+'平</p>');
//				                		recommendArr.push('<div class="newRed mui-text-right"><spa style="font-size:14px; font-weight:bold;">'+squarePrice+'</span><span style="font-size:12px;">元/平</span></div>');
//				                		recommendArr.push('<p class="mui-ellipsis">'+rows[i].area+' '+rows[i].buildingName+'平</p>');
//				                		recommendArr.push('<div class="f08">');
//				                		for (var j in keywords) {
//				                			var keyidx = j%keywordCls.length;
//				                			recommendArr.push('<button type="button" class="mui-btn '+keywordCls[keyidx]+' keyword-btn f08">'+keywords[j]+'</button>');
//				                		}
//				                		recommendArr.push('</div>');
//				                	recommendArr.push('</div>');
//				                recommendArr.push('</div>');
//				            recommendArr.push('</div>');
//				        recommendArr.push('</a>');
				        
				        recommendArr.push('<a href="javascript:;" class="" style="padding-right:20px;">');
							recommendArr.push('<div class="mui-pull-left mr5" style="width: 90px; height: 65px; overflow: hidden;">');
				        		if(rows[i].coverImage){
				        			recommendArr.push('<img src="'+rows[i].coverImage+'">');
				        		}else{
				        			recommendArr.push('<img src="images/icon_blank.png" style="max-width: 100%; max-height: 75px;">');
				        		}
				        	recommendArr.push('</div>');
							recommendArr.push('<div class="mui-media-body" style="white-space: normal;">');
								recommendArr.push('<span style="font-weight: bold;">'+rows[i].title+'</span>');
								
									recommendArr.push('<div class="flex" style="color:#ef263a;">');
										recommendArr.push('<p class="flexCell f08 m0">'+bedRoomNumber+'室 '+livingRoomNumber+'厅 '+rows[i].square+'平</p>');
										recommendArr.push('<div class="">');
											recommendArr.push('<span style="font-weight: bold;font-size: 13px;">'+squarePrice+'</span>');
											recommendArr.push('<span class="f08">元/平</span> ');
										recommendArr.push('</div>');
									recommendArr.push('</div>');
									recommendArr.push('<p class="mui-ellipsis f08 m0">'+rows[i].area+' '+rows[i].buildingName+'</p>');
									recommendArr.push('<div class="f08">');
										for (var j in keywords) {
				                			var keyidx = j%keywordCls.length;
				                			recommendArr.push('<button type="button" class="mui-btn '+keywordCls[keyidx]+' keyword-btn f08">'+keywords[j]+'</button>');
				                	}
									recommendArr.push('</div>');
									
							recommendArr.push('</div>');
						recommendArr.push('</a>');
				    recommendArr.push('</li>');
					}
					recommendList.innerHTML = recommendArr.join('');
					
					}
					mui('#recommendList li').each(function(){
						this.addEventListener('tap',function(){
							mui.openWindow({
								url:'house_detail.html',
								id:'house_detail',
								extras:{
									houseId:this.getAttribute('id')
								}
							})
						});
					
				});
				
					var imgObj = $('#recommendList img');
//					console.log(imgObj.length);
					var RATE = 0.75;	//常量，图片框比例
					imgObj.each(function(){
						$(this).load(function(){
							var rate = parseFloat($(this).height()/$(this).width());
							if(rate<RATE){		//高度不够
								$(this).css('height','75px');
								$(this).css('width',$(this).height()/rate);
							}else{				//宽度不够
								$(this).css('width','100px');
								$(this).css('height',$(this).width()*rate);
							}
							if($(this).width()>100){
								var marginLeft = parseInt(-($(this).width()-100)*0.5);
								$(this).css('margin-left',marginLeft);
							}
							if($(this).height()>75){
								var marginTop = parseInt(-($(this).height()-75)*0.5);
								$(this).css('margin-top',marginTop);
							}
						});
					});
					
				},function(msg){
					mui.toast(msg);
				});
				
				}
			
			
			
		</script>
	</body>

</html>